import React from "react";
import { Select, DatePicker, LocaleProvider, Input, Icon, Button } from "antd";
import moment from "moment";
import ControlLevelSelect from "../../components/ControlLevelSelect";
import zh_CN from "antd/lib/locale-provider/zh_CN";
import { inject, observer } from "mobx-react";
import "./style.scss";

const Option = Select.Option;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const SELECT_LIST = [
    {
        key: "type",
        width: 150,
        placeholder: "请选择",
        options: [
            { key: "warning", text: "只看有预警" },
            { key: "order", text: "只看有指令" },
            { key: "relatedapp", text: "只看有APP关联" }
        ]
    },
    {
        key: "area",
        placeholder: "按区域分类",
        options: [
            { key: "all", text: "全部(默认)" },
            { key: "area1", text: "区域1" },
            { key: "area2", text: "区域2" },
            { key: "area3", text: "区域3" }
        ]
    }
];

@inject("SideRightStore")
@observer
class Filter extends React.Component {
    handleChange = () => {
        console.log(1);
    };
    render() {
        const {
            SideRightStore: { filterData }
        } = this.props;

        return (
            <div className="PMW-list-filter">
                {SELECT_LIST.map(item => (
                    <Select
                        key={`sel-${item.key}`}
                        value={filterData[item.key]}
                        placeholder={item.placeholder}
                        className="PMW-list-filter-item"
                        dropdownClassName="dayu-select"
                        style={{ width: item.width || 130 }}
                        onChange={e => this.handleChange(e, item.key)}
                    >
                        {item.options.map(opt => (
                            <Option key={`opt-${opt.key}`} value={opt.key}>
                                {opt.text}
                            </Option>
                        ))}
                    </Select>
                ))}
                <ControlLevelSelect
                    className="PMW-list-filter-item"
                    dropdownClassName="dayu-select"
                    style={{ width: 130 }}
                />
                <Input
                    placeholder="请输入APP关键字或全称"
                    suffix={
                        <span
                            style={{ color: "#4bb7ff", cursor: "pointer" }}
                            onClick={() => this.props.SideRightStore.getRightCardResultList()}
                        >
                            <Icon type="search" />
                        </span>
                    }
                    type={"text"}
                    className="filter-ipt PMW-list-filter-item"
                    value={filterData.keywords}
                    onChange={e => this.handleChange(e.target.value, "keywords")}
                />
                <LocaleProvider locale={zh_CN}>
                    <RangePicker
                        showTime={{ format: "HH:mm" }}
                        format="YYYY-MM-DD"
                        defaultValue={[moment("2015/01/01", dateFormat), moment("2015/01/01", dateFormat)]}
                        value={[
                            moment((filterData.filterTime && filterData.filterTime[0]) || "2015/01/01", dateFormat),
                            moment((filterData.filterTime && filterData.filterTime[1]) || "2015/01/01", dateFormat)
                        ]}
                        placeholder={["Start Time", "End Time"]}
                        onChange={this.onChangeDate}
                        onOk={this.onOk}
                        className="filter-date PMW-list-filter-item"
                        style={{ width: 250 }}
                    />
                </LocaleProvider>
                <div className="PMW-list-filter-buttons">
                    <Button className="PMW-list-filter-button" ghost>
                        取消管控
                    </Button>
                    <Button className="PMW-list-filter-button" ghost>
                        预警设置
                    </Button>
                    <Button className="PMW-list-filter-button" ghost>
                        导出excel
                    </Button>
                </div>
            </div>
        );
    }
}

export default Filter;
